<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    background-color="#fff"
    text-color="#000"
    active-text-color="#ff7144"
    router
    :unique-opened="true"
  >
  <template> 
    <el-submenu :index="item.path" v-for="(item, index) in add" :key="index">
      <div
        slot="title"
        @mouseenter="onEnterTd(index)"
        @mouseleave="onLeaveTd(index)"
      >
        <img
          v-show="showList[index].show === true"
          class="inemit"
          :src="require(`@/icons/svg/${item.name}.svg`)"
          width="20"
          height="20"
        />
        <img
          v-show="showList[index].show === false"
          class="inemit"
          :src="require(`@/icons/svgs/${item.name}.svg`)"
          width="20"
          height="20"
        />
        <!-- <svg-icon :icon-class="item.meta.title"></svg-icon> -->
        <span>{{ item.name }}</span>
         <el-badge :value='info' v-if="item.name == '订单管理'"/>
      </div>
      <el-menu-item
        class="conset"
        :index="'/home/' + item.path + '/' + k.path"
        v-for="(k, index) in item.children"
        :key="index"
      >
        {{ k.name }}
         <el-badge :value='info' v-if="k.name == '售后'"/>
      </el-menu-item>
    </el-submenu>
  </template>
   <!-- <template v-else>
    <el-submenu :index="item.path" v-for="(item, index) in list" :key="index">
      <div
        slot="title"
        @mouseenter="onEnterTd(index)"
        @mouseleave="onLeaveTd(index)"
      >
        <img
          v-show="showList[index].show === true"
          class="inemit"
          :src="require(`@/icons/svg/${item.meta.title}.svg`)"
          width="20"
          height="20"
        />
        <img
          v-show="showList[index].show === false"
          class="inemit"
          :src="require(`@/icons/svgs/${item.meta.title}.svg`)"
          width="20"
          height="20"
        />
      </div>
      <el-menu-item
        class="conset"
        :index="'/home/' + item.path + '/' + k.path"
        v-for="(k, index) in item.children"
        :key="index"
      >
        {{ k.meta.title }}
      </el-menu-item>
    </el-submenu>
  </template> -->
  </el-menu>
</template>
<script>
import {dispatch} from '@/api/limits'
import arrayToTree from "array-to-tree";

export default {
  data() {
    return {
      list: Array,
      showList: [],
      add:[],
      info:''
    };
  },
  watch: {
    $route() {
 
    this.loacthser()
    },

  },
  created() {
    this.abc();
  },
  methods: {
    // 未读数
    loacthser(){
       this.info = this.$cookies.get('final') //获取到cookies中的数据
    },
   async abc() {
      const res = await dispatch()
       for(let i = 0; i < res.data.length; i++){
    this.add.push({
      name:res.data[i].name,
      path:res.data[i].routerPath,
      parentId:res.data[i].parentId,
      id:res.data[i].id,
      order:res.data[i].order
    })
   }
   const treedata = arrayToTree(this.add,{
    parentProperty:"parentId",
    customID:"id"
   })
   this.add = treedata
   this.add = this.add.sort((a,b) => a.order - b.order)
       for(let i = 0; i < this.add.length; i++){
    this.add[i].children = this.add[i].children.sort((c,d) => c.order - d.order)
   }
    this.list = this.$router.options.routes[2].children;
    // 截断，下面不变
      for (let i = 0; i < this.add.length; i++) {
        this.showList.push({ show: true });
      }
      // console.log(this.list);
      // this.lastname = sessionStorage.getItem("name");
      // this.lastname = this.$cookies.get('name')
      // console.log('w',this.lastname.slice(0,4));
    },
    onEnterTd(index) {
      this.showList[index].show = false;
      //
      // this.abc()
      // console.log(index);
    },
    onLeaveTd(index) {
      this.showList[index].show = true;
      // console.log(this.list[index].show);
      // this.abc()
    },
  },
};
</script>

<style scoped>
.el-menu-vertical-demo {
  height: 100%;
  background-color: #fff;
  border-right: 0;
}
.el-menu-item-group__title {
  height: 0;
}
.el-submenu__title {
  padding: 0 70px;
}
::v-deep .el-submenu__title:hover {
  color: #fff !important;
  background-color: #ff7144 !important;
}

.el-submenu__title i:hover {
  color: #fff;
}
.el-icon-menu {
  transform: translateX(-150%);
}
.el-menu--inline {
  background-color: #f9f9f9 !important;
}

.conset {
  background-color: #f9f9f9 !important;
 min-width: 170px;
}

/* // span{
//  display: inline-block;
/* //  transform: translateX(-65%); */
/* }  */
.el-icon-menu {
  transform: translateX(20%);
}
.el-menu-item:hover {
  background-color: #ff7144 !important;
  color: #fff !important;
}
::v-deep .inemit {
  margin-right: 5px;
  z-index: 9999;
}
/* .el-submenu__title:hover path {
	fill: #fff;

} */
::v-deep .el-submenu__title:hover > .el-icon-arrow-down {
  color: #fff !important;
}
</style>
